import { useState, Fragment } from 'react'
import { Drawer, Button, List, Col } from 'antd';
import { 
  WechatOutlined,
  GithubOutlined,
  PlusCircleOutlined,
} from '@ant-design/icons';
import Cliu from './cliu.png'

interface IProps {
  children?: any;
}

const data = [
  {
    title: '微信',
    icon: <WechatOutlined />,
    value: 'whoicliu',
  },
  {
    title: 'Gitee',
    icon: <GithubOutlined />,
    value: 'https://gitee.com/whoicliu',
  },
  {
    title: 'B 站',
    icon: <PlusCircleOutlined />,
    value: 'https://space.bilibili.com/1601108355',
  },
];

export default function AboutMe (props: IProps) {
  const [visible, setVisible] = useState(false);

  const showDrawer = () => {
    setVisible(true);
  };
  const onClose = () => {
    setVisible(false);
  };

  return (
    <Fragment>
      <Button type="primary" ghost onClick={ showDrawer }>Hello World</Button>

      <Drawer 
        title="关于我" 
        placement="right" 
        visible={visible}
        closable={false}
        onClose={ onClose }
      >
        <img src={ Cliu } alt="whoicliu" style={{ width: '100%' }} />
        <List
          itemLayout="horizontal"
          dataSource={data}
          renderItem={item => (
            <List.Item>
              <List.Item.Meta
                avatar={ item.icon }
                title={ item.title }
                description={ item.value }
              />
            </List.Item>
          )}
        />
      </Drawer>
    </Fragment>
  );
}